/*
 * @Author: zhangzhen
 * @Date: 2023-01-04 15:11:48
 * @LastEditors: zhangzhen
 * @LastEditTime: 2023-03-15 19:04:48
 *
 */
import React, {useContext} from 'react';
import {Col, Select,Radio} from 'antd';
import styles from './styles.module.scss';
import {FormContext} from '../../context';
import BasicOperate from './BasicOperate';
import AddOption from './AddOption';
import ApiModal from './apiModal';

const SelectOperate = () => {
    const {
        currentItem,
        currentIndex,
        formConTextValue,
        setFormConTextValue,
        setCurrentItem,
        formRef,
    } = useContext(FormContext);

    // 设置值
    const setValue = (key: string, value: any) => {
        const cloneValue = [...formConTextValue];
        cloneValue[currentIndex][key] = value;
        setFormConTextValue(cloneValue);
        setCurrentItem(cloneValue[currentIndex]);
    };

    return (
        <div className={styles.inputOperate}>
            <div className={styles.currentName}>下拉菜单</div>

            {/* 公共配置项 */}
            <BasicOperate>
                {/* 初始值 */}
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>默认值:</span>
                        <Select
                            allowClear
                            placeholder={'请选择'}
                            value={currentItem.defaultValue}
                            mode={currentItem.mode}
                            options={formConTextValue[currentIndex]?.options}
                            onChange={(value: number) => {
                                setValue('defaultValue', value);
                                formRef?.setFieldValue(currentItem.name,value,);
                            }}
                        />
                    </div>
                </Col>
                <Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>数据获取方式:</span>
                        <Select
                            value={currentItem.infoCome}
                            options={[
                                {label: '手动录入', value: 0},
                                {label: '接口获取', value: 1},
                            ]}
                            onChange={(value: 0 | 1) => {
                                setValue('infoCome', value);
                            }}
                        />
                    </div>
                </Col>
                {/* 手动录入 */}
                {currentItem.infoCome === 0 && (
                    <Col span={24}>
                        <div className={styles.operateItem}>
                            <span className={styles.itemName}>选项:</span>
                            <AddOption />
                        </div>
                    </Col>
                )}



                {currentItem.infoCome === 1 && (
                    <Col span={24}>
                        <div className={styles.operateItem}>
                            <span className={styles.itemName}>接口配置:</span>
                            <ApiModal />
                        </div>
                    </Col>
                )}

<Col span={24}>
                    <div className={styles.operateItem}>
                        <span className={styles.itemName}>
                            是否支持多选
                        </span>
                        <Radio.Group
                            options={[
                                {label: '是', value: 'multiple'},
                                {label: '否', value: false},
                            ]}
                            value={currentItem.mode ? currentItem.mode : false}
                            onChange={(e) => {
                                setValue(
                                    'mode',
                                    e.target.value ? e.target.value : null,
                                );
                                setValue(
                                    'defaultValue',
                                    e.target.value === 'multiple' ? [] : null,
                                );
                                formRef?.setFieldValue(
                                    currentItem.name,
                                    e.target.value === 'multiple' ? [] : null,
                                );
                            }}
                        />
                    </div>
                </Col>
            </BasicOperate>
        </div>
    );
};

export default SelectOperate;
